<template>
  <div>
    <el-card>
      <el-form ref="queryFormRef" :model="queryInfo" size="small" inline>
        <el-form-item label="员工编号" prop="empId">
          <el-input v-model="queryInfo.empId" clearable placeholder="请输入员工编号搜索"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="empName">
          <el-input v-model="queryInfo.empName" clearable placeholder="请输入员工姓名搜索"></el-input>
        </el-form-item>

        <el-form-item label="调动方式" prop="traType">
          <el-select v-model="queryInfo.traType">
            <el-option label="主动调动" value="1"></el-option>
            <el-option label="被动调动" value="2"></el-option>
            <el-option label="数据库错误" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间" prop="createTime">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
          <el-button size="mini" @click="handleRest">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="transLogDatas" style="width: 100%" v-loading="loading">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item label="员工编号">
                <span>{{ props.row.empId }}</span>
              </el-form-item>
              <el-form-item label="部门编号">
                <span>{{ props.row.preDeptId }}</span>
              </el-form-item>
              <el-form-item label="部门名称">
                <span>{{ props.row.preDeptName }}</span>
              </el-form-item>
              <el-form-item label="调转后部门">
                <span>{{ props.row.newDeptName }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="员工姓名" prop="empName"></el-table-column>
        <el-table-column label="调动类型">
          <template slot-scope="scope">
            {{
            ["数据库错误", "主动调动", "被动调动"][scope.row.traType]
            }}
          </template>
        </el-table-column>
        <el-table-column label="调转原因" prop="traReason"></el-table-column>
        <el-table-column label="操作人" prop="operName"></el-table-column>
        <el-table-column label="备注" prop="traRemark"></el-table-column>
        <el-table-column label="调动时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="delTranLog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getDeptTranData"
        @current-change="getDeptTranData"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getDeptTranApi, delDeptTransLog } from "@/api/deptTran";
export default {
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        //
        isAsc: "desc",
        //员工编号
        empId: "",
        //员工姓名
        empName: "",
        //调动方式
        traType: "",
        // 开始时间
        beginTime: undefined,
        // 结束时间
        endTime: undefined,
      },
      total: 1,
      transLogDatas: [],
      loading: false,
      dateRange: [],
    };
  },
  methods: {
    async getDeptTranData() {
      try {
        this.loading = true;
        const { data, code } = await getDeptTranApi(this.queryInfo);
        if (code !== 200) return;
        this.transLogDatas = data.deptTransfers;
        // console.log(this.transLogDatas);
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.getDeptTranData();
    },
    handleRest() {
      this.$refs.queryFormRef.resetFields();
      this.getDeptTranData();
    },
    delTranLog(deptLog) {
      console.log(deptLog.id);
      this.confirm(`删除${deptLog.empName}的调动记录`, async () => {
        const { code } = await delDeptTransLog(deptLog.id);
        if (code !== 200) return Promise.reject();
        this.getDeptTranData();
      });
    },
    // 封装应答框
    confirm(title, cb, operation = "删除") {
      this.$confirm(`此操作将${title}, 是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await cb();
            this.$message.success(`${operation}成功!`);
          } catch {
            this.$message.error(`${operation}失败!`);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${operation}`,
          });
        });
    },
  },
  created() {
    this.getDeptTranData();
  },
  watch: {
    dateRange(nVal) {
      if (nVal !== null) {
        this.queryInfo.beginTime = nVal[0];
        this.queryInfo.endTime = nVal[1];
      } else {
        this.queryInfo.beginTime = undefined;
        this.queryInfo.endTime = undefined;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin: 18px 0px;
  float: right;
}
.table-expand {
  font-size: 0;
}
/deep/ .table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
